<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=BFdSIyFgeUBPV0XBaeVRxAV3ongoLUYk"></script>-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PTEq5MwSOvGTXbbIbejETOGZ6yjl9v9D"></script>
<style>
    /* 百度地图样式 */
    .iw_poi_title {
        color: #CC5522;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        padding-right: 13px;
        white-space: nowrap
    }

    .iw_poi_content {
        font: 12px arial, sans-serif;
        overflow: visible;
        padding-top: 4px;
        white-space: -moz-pre-wrap;
        word-wrap: break-word
    }

    .BMapLabel {
        display: none;
    }

    .BMap_Marker > div > img {
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
    }
</style>
<!--  / warpper  -->
<main class="warpper">

    <div class="contactSec1">
        <div class="contactSec1_title">
            <img src="__CDN__/static/images/logo2.png" alt="">
        </div>
        <div class="contactSec1_con">
            <!-- 地图 -->
            <div class="contactSec1_map" id="dituContent"></div>
            <!-- 右侧信息 -->
            <div class="contactSec1_box">
                <div class="contactSec1_txt">
                    <h5>{$system.company_name}</h5>
                    <h6>Address</h6>
                    <p>{$system.address}</p>
                    <h6>Tel</h6>
                    <p>{$system.tel}</p>
                </div>
                <ul class="contactSec1_ewm">
                    <li>
                        <img src="__CDN__{$system.service_image}" alt="" width="100%">
                        <p>Y.SING官方服务号</p>
                    </li>
                    <li>
                        <img src="__CDN__{$system.video_image}" alt="" width="100%">
                        <p>Y.SING官方视频号</p>
                    </li>
                    {foreach $thirdqrcode as $row}
                    <li>
                        <img src="__CDN__{$row.qrcode_image}" alt="" width="100%">
                        <p>{$row.name}</p>
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
    </div>

    <div class="contactSec2">
        <div class="contactSec2_title">在线留言</div>
        <form class="contactSec2_form" action="">
            <div class="contactSec2_input">
                <input type="text" name="name" placeholder="姓名">
            </div>
            <div class="contactSec2_input">
                <input type="text" name="mobile" placeholder="电话">
            </div>
            <div class="contactSec2_input">
                <input type="text" name="email" placeholder="邮箱">
            </div>
            <div class="contactSec2_textarea">
                <textarea name="content" id="" cols="30" rows="10" placeholder="内容"></textarea>
            </div>
            <div class="publicMore contactSec2_send">
                <a href="javascript:;" onclick="sendMessage()">Send</a>
            </div>
        </form>
    </div>

</main>
<!--  / warpper  -->

<script>
    function sendMessage() {
        var name = $("input[name='name']").val();
        var mobile = $("input[name='mobile']").val();
        var email = $("input[name='email']").val();
        var content = $("textarea[name='content']").text();
        $.ajax({
            url: '/api/index/sendMessage',
            type: 'POST',
            beforeSend: function(xhr) {
                xhr.setRequestHeader("token", "{$token}");
            },
            data: {
                name,
                mobile,
                email,
                content
            },
            success: function(res) {
                alert(res.msg);
            },
            error: function() {
                alert('提交失败');
            }
        })
    }

    $(function () {


    })

    $(window).ready(function () {
        $('.headerNav:last-child li').eq(2).addClass('on');
    })
    $(window).load(function () {
        if ($(window).width() <= 768) {
            $('.contactSec1,.contactSec2').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


    })


    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker

    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(120.218134, 30.34541);//定义一个中心点坐标
        map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局


        var mapStyle = {style: "grayscale"}
        map.setMapStyle(mapStyle);
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        // map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        // var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        // map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [
        {
            title: "杭州拱墅区店",
            content: "杭州市拱墅区华丰路1号<br/>Tel: 18952412369",
            point: "120.218067|30.345745",
            isOpen: 1,
            icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}
        }
    ];

    //创建marker
    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point, {icon: iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
            });

            (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                    _marker.getLabel().show();
                })
                label.addEventListener("click", function () {
                    _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }

    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
        return iw;
    }

    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
            imageOffset: new BMap.Size(-json.l, -json.t),
            infoWindowOffset: new BMap.Size(json.lb + 5, 1),
            offset: new BMap.Size(json.x, json.h)
        })
        return icon;
    }

    initMap();//创建和初始化地图
</script>